<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">

    <title>Test Table - Metro 4 :: Popular HTML, CSS and JS library</title>

</head>
<body class="m4-cloak">
<div class="container">
    <h1 class="text-center">Metro 4 Table component</h1>
    <h3 class="text-center">Methods</h3>

    <div class="text-center">
        <button class="button" onclick="setData()">Set data</button>
    </div>

    <table id="t1" class="table striped table-border mt-4"
           data-role="table"
           data-cls-component="mt-10"
           data-rows="10"
           data-pagination="true"
           data-show-all-pages="false"
           data-rownum="true"
    >
        <thead>
            <tr>
                <th data-size="50">ID</th>
                <th>Name</th>
                <th>Birthday</th>
                <th>Age</th>
                <th>Salary</th>
            </tr>
        </thead>
    </table>
    <div>
        <button class="button alert" onclick="$('#t1').data('table').toggleInspector()">Open Inspector</button>
    </div>
</div>

<script src="../metro/js/metro.js?ver=@@b-version"></script>
<script>
    var tableData = {
        "data": [
            [
                1,
                "Aidan",
                "31-12-2017",
                63,
                "$7,843"
            ],
            [
                2,
                "Ferris",
                "13-06-2018",
                28,
                "$8,877"
            ],
            [
                3,
                "Joseph",
                "06-02-2018",
                43,
                "$5,645"
            ],
            [
                4,
                "Troy",
                "11-03-2019",
                26,
                "$5,405"
            ],
            [
                5,
                "Kennedy",
                "11-02-2018",
                60,
                "$5,780"
            ],
            [
                6,
                "Cullen",
                "23-09-2017",
                62,
                "$5,482"
            ],
            [
                7,
                "Eric",
                "04-01-2019",
                53,
                "$6,490"
            ]
        ]
    }
    function setData(){
        var table = Metro.getPlugin("#t1","table")
        table.setData(tableData)
    }
</script>
</body>
</html>
